<template>
    <div class="bgimgcompany">
        <div class="register2">
            <div>
                <h3>企业注册</h3>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
                    <el-form-item prop="compname" style="width: 300px;" required="true">
                        <el-input placeholder="企业名称" v-model="ruleForm.compname"></el-input>
                    </el-form-item>
                    <el-form-item prop="comppass" style="width: 300px" required="true">
                        <el-input placeholder="密码" v-model="ruleForm.comppass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="checkPass" style="width: 300px" required="true">
                        <el-input placeholder="确认密码" type="password" v-model="ruleForm.checkPass"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="compemail" style="width: 300px" required="true">
                        <el-input placeholder="邮箱" type="password" v-model="ruleForm.compemail"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="registerbutton">
                            <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'register2',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.comppass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    compname: '',
                    comppass: '',
                    checkPass: '',
                    compemail: ''
                },
                rules: {
                    compname: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的用户名', trigger: 'blur'}
                    ],
                    comppass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    compemail: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>
<style scoped>
    .register2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        background: #fff;
        border: 1px solid #ededed;
        margin-left: 55%;
        margin-top: 5%;
        width: 500px;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        position: relative;
    }
</style>
